<!-- #layout name=blank-->
<div id="app" v-cloak>
  <div class="page-header">
    <h1 class="title">Kooboo Config</h1>
  </div>
  <kb-breadcrumb :breads="breads"></kb-breadcrumb>
  <div class="navbar navbar-default">
    <div class="container-fluid">
      <a @click="onDelete" v-if="tableDataSelected.length > 0" class="btn red navbar-btn">Delete</a>
    </div>
  </div>
  <kb-table :show-select="true" :data="tableData" :selected.sync="tableDataSelected">
    <kb-table-column :label="Kooboo.text.common.name" body-class="summary">
      <template v-slot="row">
        <a href="javascript:;">
          <p>{{rowNameFormat(row).title}}</p>
          <p>{{rowNameFormat(row).description}}</p>
        </a>
      </template>
    </kb-table-column>
    <kb-table-column :label="Kooboo.text.common.preview" body-class="table-thumbnail">
      <template v-slot="row">
        <a target="_blank"
          @click.stop="linkTo(firstKey(row) === 'src'?row.binding[firstKey(row)] + '?SiteId=' + Kooboo.getQueryString('siteid'): '')"
          v-if="row.tagName == 'img'">
          <div class="thumbnail-fixed">
            <div class="img-wrap"></div>
            <img
              :src="firstKey(row) === 'src'?row.binding[firstKey(row)] + '?SiteId=' + Kooboo.getQueryString('siteid'): ''" />
          </div>
        </a>
        <div style="text-align: center" v-else>
          -
        </div>
      </template>
    </kb-table-column>
    <kb-table-column :label="'tagName'">
      <template v-slot="row">
        <span class="label label-sm blue" v-kb-tooltip="row.tagHtml">{{ '<' + row.tagName + '>' }}</span>
      </template>
    </kb-table-column>
    <kb-table-column :label="Kooboo.text.common.usedBy">
      <template v-slot="row">
        <a v-for="(item, index) in Kooboo.objToArr(row.relations)" class="label label-sm kb-table-label-refer"
          :key="index" :style="{
                  background: Kooboo.getLabelColor(item.key.toLowerCase())
                }" @click.stop="onShowRelationModal(item.key, row.id,  Kooboo.KConfig.name)">
          {{ item.value + " " +
          Kooboo.text.component.table[item.key.toLowerCase()] }}
        </a>
      </template>
    </kb-table-column>
    <kb-table-column :label="Kooboo.text.common.lastModified">
      <template v-slot="row">
        <span>{{new Date(row.lastModified).toDefaultLangString()}}</span>
      </template>
    </kb-table-column>
    <kb-table-column :label="''" width="40px">
      <template v-slot="row">
        <button v-for="(item, index) in Kooboo.objToArr(row.relations)" @click.stop="onEdit(row)"
          class="btn btn-xs blue pull-right" :title="Kooboo.text.common.edit"><i class="fa fa-pencil"></i></button>
      </template>
    </kb-table-column>
    <kb-table-column :label="''" width="40px">
      <template v-slot="row">
        <a class="btn blue btn-xs" :href="getVersionsUrl(row.keyHash,row.storeNameHash)" target="_blank">
          <i class="fa fa-clock-o"></i>
        </a>
      </template>
    </kb-table-column>
  </kb-table>

  <kb-relation-modal></kb-relation-modal>

  <div class="modal fade" data-backdrop="static" data-keyboard="false" v-kb-modal="showConfigModal">
    <kb-dialog ref="dialog">
      <kb-dialog-header :close-handle="onConfigCancel" :title="Kooboo.text.common.KConfig"></kb-dialog-header>
      <kb-dialog-content>
        <div v-if="configItem.length > 0" v-for="item in configItem">
          <div class="form-group">
            <label class="control-label">{{item.key}}</label>
            <textarea class="form-control autosize" v-model="item.value"></textarea>
          </div>
        </div>
        <div class="form-group" v-else>
          <p class="form-control-static">No configuration item</p>
        </div>
      </kb-dialog-content>
      <kb-dialog-footer>
        <button class="btn green" @click="onConfigSave">Save</button>
        <button class="btn gray" @click="onConfigCancel">Cancel</button>
      </kb-dialog-footer>
    </kb-dialog>
  </div>

  <kb-media-dialog :data="mediaDialogData"></kb-media-dialog>
</div>

<script>
  (function () {
    Kooboo.loadJS([
      "/_Admin/Scripts/components/kbBreadcrumb.js",
      "/_Admin/Scripts/components/kbTable.js",
      "/_Admin/Scripts/components/kbRelationModal.js",
      "/_Admin/Scripts/components/kb-media-dialog.js",
      "/_Admin/Scripts/components/kbDialog.js"
    ]);
  })();
</script>
<script src="/_Admin/View/System/KConfig.js"></script>